<template>
	<view class="wrap" v-show="!loading">
		<view class="box-top d-s-c">
			<view class="num f26 mr40">句数：{{totalNum}}</view>
			<view class="box-btns d-c-c">
				<view class="btn" :class="{active:current===1}" @click="current=1">无遮盖</view>
				<view class="btn" :class="{active:current===2}" @click="current=2">遮中文</view>
				<view class="btn" :class="{active:current===3}" @click="current=3">遮英文</view>
			</view>
			<!-- <view class="dropdown">
				<u-dropdown>
					<u-dropdown-item v-model="type" title="全部" :options="typeList"></u-dropdown-item>
				</u-dropdown>
			</view> -->
		</view>
		
		<view class="box-content">
			<view class="box-item d-b-c" v-for="(item, index) in list" :key="index">
				<view class="flex-1">
					<view class="f36 gray3 fweib mb20" v-show="current==1||current==2">{{item.sentence}}</view>
					<view class="f28 gray6 fweib" v-show="current==1||current==3">{{item.chinese}}</view>
				</view>
				<image :src="item.click?acimg:deimg" mode="widthFix" @click="playAudio(index, item.sound_path)"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				deimg: require('@/static/index1/37.png'),
				acimg: require('@/static/index1/38.png'),
				loading: true,
				unitId: 0,
				subunit: '',
				totalNum: 0,
				current: 1,
				type: 1,
				typeList: [
					{label: '全部', value: 1},
					{label: '未学', value: 2},
					{label: '掌握', value: 3},
					{label: '已学', value: 4},
					{label: '易错', value: 5},
					{label: '收藏', value: 6},
				],
				list: [],
			};
		},
		onLoad(options) {
			this.unitId = options.unitId || 0
			this.subunit = options.subunit || ''
			this.getList()
		},
		methods: {
			getList() {
				uni.showLoading({
					title: '加载中...',
				})
				this.$u.post(this.$u.api.sentence, {
					unitId: this.unitId,
					subunit: this.subunit,
				}).then((res) => {
					uni.hideLoading()
					this.loading = false
					this.totalNum = res.data.length
					res.data.forEach((item) => {
						item.click = false
					})
					this.list = res.data
				}).catch((err) => {
					uni.hideLoading()
					this.loading = false
					console.log(err)
				})
			},
			// 播放音频
			playAudio(index, audio) {
				this.list[index].click = true
				if (audio) {
					this.utils.playAudio(audio)
				}
			},
		},
	}
</script>

<style lang="less" scoped>
	.wrap {
		padding: 20rpx 30rpx;
	}

	.box-top{
		.num{
			color: #999999;
		}
		
		.box-btns{
			height: 52rpx;
			border-radius: 26rpx;
			overflow: hidden;
			.btn{
				height: 100%;
				width: 134rpx;
				color: #fff;
				background: rgba(153,153,153,0.5);
				font-size: 26rpx;
				line-height: 52rpx;
				text-align: center;
				cursor: pointer;
				&.active{
					background: #4BB0FF;
				}
			}
		}
		
		.dropdown{
			width: 160rpx !important;
		}
	}

	.box-content{
		background-color: #fff;
		border-radius: 10rpx;
		margin-top:30rpx;
		.box-item{
			padding: 46rpx 20rpx 34rpx;
			border-bottom: 1rpx solid rgba(204,204,204,0.5);
			&:hover{
				// box-shadow: 0 10rpx 10rpx #ccc !important;
				background-color: rgba(11,153,254,0.3) !important;
				cursor: pointer;
			}
			image{
				display: block;
				width: 40rpx;
				cursor: pointer;
			}
			
		}
	}
</style>
